<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" content="">
		<title>core - d3.transform</title>
		<script type="text/javascript" src="../../d3.js"></script>
	</head>
	<body>

		<script type="text/javascript">
			//向body标签增加svg子元素
			var svg = d3.select('body')
				.append('svg')
				.attr({
					"width": 700,
					"height": 500,
				});

			svg.append('rect')
				.attr({
					x: 100, y: 100, width: 50, height: 25,
					transform: "translate(1, 1)rotate(1)scale(1)"
				});
				
			//给svg元素绑定mousemove监听器
			svg.on("click", function (d, i) {
				//获取元素的transform属性的值，并用此构建transform对象
				var transform = d3.transform(d3.select(this).attr('transform'));

				//transform.rotate
				console.log(transform.rotate);

				//transform.translate
				console.log(transform.translate);

				//transform.skew
				console.log(transform.skew);

				//transform.scale
				console.log(transform.scale);

				//transform.toString
				console.log(transform.toString());
			});
		</script>
	</body>
</html>